<template>
  <div class="continer">
    <header>
      <van-nav-bar left-text="返回" left-arrow>
        <template #title>
          <van-search shape="round" background="#fff" placeholder="请输入搜索关键词" />
        </template>
        <template #left>
          <van-icon name="arrow-left" size="25px" color="black" />
        </template>
        <template #right>
          <van-icon name="ellipsis" size="25px" color="black" />
        </template>
      </van-nav-bar>
    </header>
    <main>
      <div class="ca-left">
        <van-sidebar v-model="active" @change="onChange">
          <van-sidebar-item :title="item.cat_name" v-for="item in category">
          </van-sidebar-item>
        </van-sidebar>
      </div>
      <ul class="ca-right">
        <li v-for="item in children">
          <p>{{ item.cat_name }}</p>
          <van-grid>
            <van-grid-item :icon="item1.cat_icon" :text="item1.cat_name" v-for="item1 in item.children" />
          </van-grid>
        </li>
      </ul>
    </main>
  </div>
</template>

<script>
import { getCategoryList } from '@/apis/kind';
export default {
  data() {
    return {
      category: [],
      active: 0,
      children: [],
      // grandchild: []
    }
  },
  created() {
    getCategoryList().then(res => {
      console.log(res.data.data);
      this.category = res.data.data
      this.children = this.category[0].children

      // this.grandchild = this.children[0].children
    })
  },
  methods: {
    onChange() {
      this.children = this.category[this.active].children
      // console.log(this.category[this.active].children);
      // this.grandchild = this.children[this.active].children
    }
  }
}
</script>

<style lang="less" scoped>
main {
  display: flex;

  .ca-left {
    overflow-y: auto;
  }

  .ca-right {
    overflow-y: auto;
    flex: 1;
  }
}
</style>